<template>
  <div class="border-line card">
    <header-title
      :style="{ 'font-size': fontSize + 'px' }"
      title="人才保租房租金水平（投入运营总计35个项目，12558套，平均租金15.1元/m²）"
      @fullScreen="handleFullScreen"
    ></header-title>
    <div class="content">
      <div class="column">
        <div class="table">
          <div class="header">
            <div class="col">项目名称</div>
            <div class="col">平均面积（m²）</div>
            <div class="col">整套租金总价（元/月）</div>
            <div class="col">租金单价（元/m²）</div>
          </div>
          <vue-seamless-scroll :data="listData" :class-option="classOption" class="scroll-warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="col">
                  <ellipsis :length="20">{{ item.XMMC }}</ellipsis>
                </span>
                <span class="col">{{ item.pjmj }}</span>
                <span class="col">{{ item.ZTZJZJ }}</span>
                <span class="col">{{ item.ZJDJ }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { getRent } from '@/api/analysis'
import { Ellipsis } from '@/components'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { setFontSize } from '@/utils/util'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    vueSeamlessScroll,
    headerTitle,
    Ellipsis,
  },
  mounted() {
    this.fetchData()
    window.addEventListener('resize', this.screenAdatper)
  },
  data() {
    return {
      classOption: {
        singleHeight: 40,
      },
      listData: [],
      fontSize: 24,
      titleFontSize: 16,
    }
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    screenAdatper() {
      this.fontSize = setFontSize(26) * 0.2
      this.titleFontSize = setFontSize(24) * 0.2
    },
    fetchData() {
      getRent({ RegionNo: this.areaID }).then((res) => {
        this.listData = res
        this.listData.forEach((item) => {
          item.pjmj = parseInt(item.ZTZJZJ / item.ZJDJ)
        })
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  font-size: 18px;
  .content {
    display: flex;
    flex-direction: row;
    margin-top: 6px;
    .column {
      flex: 1;
      .table {
        .col {
          flex: 1;
          font-size: 20px;
        }

        .header {
          background: #0f3560;
          font-size: 16px;
          padding: 0 18px;
          color: #fff;
          display: flex;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
        }

        .scroll-warp {
          height: 280px;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            li {
              height: 40px;
              line-height: 40px;
              padding: 0 18px;
              color: #61a8ff;
              position: relative;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              &:nth-child(2n) {
                background: rgb(8, 38, 91);
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .ant-progress-inner {
  background-color: #0a337e;
}
</style>
